<template>
  <div style="padding: 2vw">
    <div style="height: 800px">
      <div class="main-header">
        <div style="margin-bottom: 1vh">
          发送人昵称:
          <el-input
              type="text"
              placeholder="请输入内容"
              style="margin-right: 5vw; margin-left: 1vw;width: 200px;"
              v-model="sendName"
          />
          发送人账号:
          <el-input
              type="text"
              placeholder="请输入内容"
              style="margin-right: 5vw; margin-left: 1vw;width: 200px;"
              v-model="sendAccount"
          />
          发送时间:<el-date-picker
            type="datetime"
            placeholder="请选择日期时间"
            style="margin-right: 1vw; margin-left: 1vw;width: 170px;"
            v-model="startTime"
        />至<el-date-picker
            type="datetime"
            placeholder="请选择日期时间"
            style="margin-right: 5vw; margin-left: 1vw;width: 170px;"
            v-model="endTime"
        />
        </div>
        <div>
          接收人昵称:
          <el-input
              type="text"
              placeholder="请输入内容"
              style="margin-right: 5vw; margin-left: 1vw;width: 200px;"
              v-model="receiveName"
          />
          接收人账号:
          <el-input
              type="text"
              placeholder="请输入内容"
              style="margin-right: 5vw; margin-left: 1vw;width: 200px;"
              v-model="receiveAccount"
          />
          <el-button type="primary" style="float: right; margin: 0 7vw 1vw; line-height: 4px" @click="check()">查询</el-button>
        </div>
      </div>
      <div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed label="序号" min-width="50">
            <template slot-scope="scope">
              <span>{{ scope.row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发送人昵称" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.sendName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发送人账号" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.sendAccount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="接收人昵称" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.receiveName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="接收人账号" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.receiveAccount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="消息内容" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.text }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发送时间" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="50">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="checkDetails(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
            title="聊天详情"
            :visible.sync="dialogVisible"
            width="30%">
          <div :data="form" class="detailBox">
            <span>发送人昵称:</span><span>{{ form.sendName }}</span>
            <span>发送人账号:</span><span>{{ form.sendAccount }}</span>
            <span>接收人昵称:</span><span>{{ form.receiveName }}</span>
            <span>接收人账号:</span><span>{{ form.receiveAccount }}</span>
          </div>
          <div style="margin: 10px">
            <span>发送时间:</span><span style="margin-left:20px">{{ form.time }}</span>
          </div>
          <div style="padding-top: 10px">
            <span style="margin: 10px">消息内容:</span>
            <p style="margin: 10px">{{ form.text }}</p>
          </div>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">返 回</el-button>
        </span>
        </el-dialog>
      </div>

      <div style="float: right; margin-top: 10vh">
        <el-pagination
            background
            :page-size="size"
            layout="sizes, prev, pager, next,jumper"
            :page-sizes="[10]"
            :total="total"
            @current-change="upPage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: [
        {
          sendName: "",
          sendAccount: "",
          receiveName: "",
          receiveAccount: "",
          text: "",
          time: "",
        },
      ],
      dialogVisible: false,
      sendName: "",
      sendAccount: "",
      receiveName: "",
      receiveAccount: "",
      startTime: "",
      endTime: "",
      tableData: [
        {
          id: '',
          num: "",
          sendName: "",
          sendAccount: "",
          receiveName: "",
          receiveAccount: "",
          text: "",
          time: "",
        },
      ],
      size: 10,
      current: 1,
      total: 0,
      pages: 0,
    };
  },
  methods: {
    //查看聊天记录详情
    checkDetails(record) {
      this.form.sendName = record.sendName;
      this.form.sendAccount = record.sendAccount;
      this.form.receiveName = record.receiveName;
      this.form.receiveAccount = record.receiveAccount;
      this.form.text = record.text;
      this.form.time = record.time;
      this.dialogVisible = true;
    },
    //更新页码
    upPage(val) {
      this.current = val;
      this.check();
    },
    //查询聊天记录
    check() {
      let url = '/api/lzs/message/page';
      let params = {
        currentPage: this.current,
        endTime: this.endTime?this.moment(this.endTime).format("yyyy-MM-DD HH:mm:ss"):"",
        pageSize: this.size,
        receiveAccount: this.receiveAccount,
        receiveName: this.receiveName,
        sendAccount: this.sendAccount,
        sendName: this.sendName,
        startTime: this.startTime?this.moment(this.startTime).format("yyyy-MM-DD HH:mm:ss"):""
      }

      this.http.post(url, params).then((res) => {
        let data = res.data.data
        this.total = data.total;
        this.pages = data.pages;
        this.size = data.size;
        this.current = data.current;
        this.tableData = [];
        for (let i in data.records) {
          let temp = {
            id: data.records[i].id,
            num: (Number(this.current) - 1) * Number(this.size) + 1 + Number(i),
            receiveName: data.records[i].receiveName,
            receiveAccount: data.records[i].receiveAccount,
            sendName: data.records[i].sendName,
            sendAccount: data.records[i].sendAccount,
            text: data.records[i].text,
            time: data.records[i].time,
          };
          this.tableData.push(temp);
        }
      })
    }
  },
  mounted() {
    this.check();
  },
};
</script>

<style lang="scss" scoped>
.main-header {
  line-height: 30px;
}

.detailBox {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: space-around;

  span {
    margin: 10px;
  }

  p {
    display: block;
  }
}
</style>
